<template>
  <div class="hv-bg-img">
    <a-upload list-type="picture" :showUploadList="false" :before-upload="beforeUpload">
      <div class="hv-bg-img-upload-operate">
        <a-button type="link" size="small">
          <hv-dynamic-icon :iconName="'UploadOutlined'" />
          {{
            propData &&
            propData.styleProps &&
            propData.styleProps.backgroundImage &&
            propData.styleProps.backgroundImage.length > 0
              ? '重新上传'
              : '上传图片'
          }}
        </a-button>
        <a-button type="link" size="small" @click.stop="openResource">
          <hv-dynamic-icon :iconName="'SelectOutlined'" /> 素材库选择
        </a-button>
      </div>
    </a-upload>
    <div class="hv-bg-img-preview">
      <div class="hv-bg-img-preview-img">
        <img
          :src="propData.styleProps.backgroundImage"
          v-if="propData && propData.styleProps"
          v-hv-error-src="transparentImg"
        />
      </div>
      <div class="hv-bg-img-preview-content">
        <div class="hv-bg-img-preview-content-title">
          <div v-if="propData && propData.styleProps" :title="propData.styleProps.backgroundImage">
            {{ propData.styleProps.backgroundImage || '未上传图片！' }}
          </div>
        </div>
        <div>
          <a-button type="link" size="small" title="查看">
            <hv-dynamic-icon :iconName="'EyeOutlined'" />
          </a-button>
          <a-button type="link" size="small" title="复制" @click="copyImgPath">
            <hv-dynamic-icon :iconName="'CopyOutlined'" />
          </a-button>
          <a-popconfirm title="您确认要删除吗？" @confirm="deleteImg" overlayClassName="hv-dark-popover">
            <a-button type="link" size="small" title="删除">
              <hv-dynamic-icon :iconName="'DeleteOutlined'" />
            </a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>

    <div class="hv-bg-img-repeat" v-if="propData && propData.styleProps">
      <div class="hv-bg-img-repeat-sub-title">重复属性：</div>
      <a-radio-group
        v-model:value="propData.styleProps.backgroundRepeat"
        button-style="solid"
        size="small"
      >
        <a-radio-button value="no-repeat">不重复</a-radio-button>
        <a-radio-button value="repeat">重复</a-radio-button>
        <a-radio-button value="repeat-x">水平</a-radio-button>
        <a-radio-button value="repeat-y">垂直</a-radio-button>
        <a-radio-button value="inherit">继承</a-radio-button>
      </a-radio-group>
    </div>

    <div
      class="hv-bg-img-input-prop"
      v-if="propData && propData.styleProps && propData.styleProps.backgroundSize"
    >
      <div class="hv-bg-img-input-prop-sub-line">
        <div class="hv-bg-img-input-prop-sub-line-title">尺寸属性：</div>
        <a-checkbox v-model:checked="backgroundSizeChecked" @change="backgroundSizeChange"
          >自动设置</a-checkbox
        >
      </div>
      <div class="hv-bg-img-input-prop-inputs">
        <a-input
          v-model:value="propData.styleProps.backgroundSize[0]"
          :disabled="backgroundSizeChecked"
          size="small"
        />
        <a-input
          v-model:value="propData.styleProps.backgroundSize[1]"
          :disabled="backgroundSizeChecked"
          size="small"
        />
      </div>
    </div>

    <div
      class="hv-bg-img-input-prop"
      v-if="propData && propData.styleProps && propData.styleProps.backgroundPosition"
    >
      <div class="hv-bg-img-input-prop-sub-line">
        <div class="hv-bg-img-input-prop-sub-line-title">位置属性：</div>
      </div>
      <div class="hv-bg-img-input-prop-inputs">
        <a-input v-model:value="propData.styleProps.backgroundPosition[0]" size="small" />
        <a-input v-model:value="propData.styleProps.backgroundPosition[1]" size="small" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, type PropType, ref, watch } from 'vue';
  import FileUploadApi from '@/visual/apis/file-upload-api';
  import HttpResultUtil from '@/visual/commons/utils/http-result-util';
  import CommonUtil from '@/visual/commons/utils/common-util';
  import transparentImg from '@/visual/assets/img/dashboard/transparent.png';
  import useClipboard from 'vue-clipboard3';
  import { notification } from 'ant-design-vue';
  import type DashboardComponentType from '@/visual/commons/types/dashboard-component-type';
  import { cssStylePropValConst } from '@/visual/commons/consts/dashboard-const';
  import { useVisualConfigStore } from '@/visual/stores/visual-config';
  import { businessMarkConst } from '@/visual/commons/consts/business-mark-const';
  import { useDashboardStore } from '@/visual/stores/dashboard';
  import { useRoute } from 'vue-router';

  export default defineComponent({
    name: 'BackgroundImage',
    props: {
      compData: {
        type: Object as PropType<DashboardComponentType<any>>,
        default: () => {
          return {};
        },
      },
    },
    //emits: ['update:value', 'change'],
    setup(props) {
      const route = useRoute();
      const propData = ref<DashboardComponentType<any>>();
      const backgroundSizeChecked = ref<boolean>(false);
      const useVisualConfig = useVisualConfigStore();
      const useDashboard = useDashboardStore();

      const { toClipboard } = useClipboard();

      watch(
        () => props.compData,
        () => {
          propData.value = props.compData;
          if (propData.value.styleProps && propData.value.styleProps.backgroundSize) {
            backgroundSizeChecked.value =
              propData.value.styleProps.backgroundSize[0] === cssStylePropValConst.auto
                ? true
                : false;
          }
        },
        { deep: true, immediate: true }
      );

      const beforeUpload = (file: any) => {
        const businessId =
          route && route.query && route.query.id ? route.query.id : useDashboard.getDashboardTempId;
        const formData = new FormData();
        formData.append('imgUpload', file);
        formData.append('businessId', businessId);
        formData.append('businessMark', businessMarkConst.dashboard);
        formData.append('createUserId', useVisualConfig.getUserInfo.userId);
        formData.append('createUser', useVisualConfig.getUserInfo.userName);

        FileUploadApi.uploadImg(formData).then((res) => {
          if (HttpResultUtil.isSuccess(res)) {
            if (propData.value && propData.value.styleProps) {
              propData.value.styleProps.backgroundImage = FileUploadApi.previewImg(
                res.data.responseData
              );
            }
          } else {
            HttpResultUtil.failureTipMsg(res);
          }
        });
        return false;
      };

      const openResource = () => {};

      const backgroundSizeChange = () => {
        if (propData.value && propData.value.styleProps) {
          propData.value.styleProps.backgroundSize = backgroundSizeChecked.value
            ? [cssStylePropValConst.auto, cssStylePropValConst.auto]
            : [cssStylePropValConst.oneHundredPercent, cssStylePropValConst.oneHundredPercent];
        }
      };

      const deleteImg = () => {
        if (propData.value && propData.value.styleProps) {
          propData.value.styleProps.backgroundImage = '';
        }
      };

      const copyImgPath = async () => {
        if (
          propData.value &&
          propData.value.styleProps &&
          propData.value.styleProps.backgroundImage
        ) {
          try {
            await toClipboard(propData.value.styleProps.backgroundImage);
            notification.success({
              message: '提示',
              description: '复制成功！',
            });
          } catch (e) {
            notification.warning({
              message: '提示',
              description: '复制失败！',
            });
          }
        } else {
          notification.warning({
            message: '提示',
            description: '未上传图片！',
          });
        }
      };

      return {
        beforeUpload,
        openResource,
        propData,
        backgroundSizeChange,
        backgroundSizeChecked,
        transparentImg,
        deleteImg,
        copyImgPath,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import './BackgroundImage.less';
</style>
